<div
  d-file-drop
  [enableDrop]="enableDrop"
  (fileDrop)="onFileDrop($event)"
  (fileOver)="onFileOver($event)"
  (fileSelect)="onFileSelect($event)"
  [ngStyle]="{ border: isDropOVer ? '1px solid #15bf15' : '0' }"
  style="display: flex"
>
  <div class="devui-input-group" [class.disabled]="disabled" (click)="onClick($event)">
    <div *ngIf="dMultipleUploadView.fileUploaders.length === 0" class="devui-form-control devui-upload-placeholder">
      {{ placeholderText ? placeholderText : i18nText?.chooseFile }}
    </div>
    <ul *ngIf="dMultipleUploadView.fileUploaders.length > 0" class="devui-form-control devui-files-list">
      <li
        *ngFor="let fileUploader of dMultipleUploadView.fileUploaders; let index = index"
        class="devui-file-item devui-file-tag"
        style="display: inline-block; margin: 0 2px 2px 0"
        title="{{ fileUploader.file.name }}"
      >
        <span class="devui-filename {{ fileUploader.status === UploadStatus.failed ? 'devui-failed-color' : '' }}">
          {{ fileUploader.file.name }}
        </span>
        <span
          class="icon icon-close {{ fileUploader.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}
          {{
            fileUploader.status === UploadStatus.uploading || fileUploader.status === UploadStatus.uploaded ? 'devui-uploading-delete' : ''
          }}"
          (click)="deleteFile($event, fileUploader.file)"
        >
        </span>
        <div *ngIf="fileUploader.status === UploadStatus.uploading" class="icon devui-upload-progress">
          <d-progress
            [isCircle]="true"
            [percentage]="fileUploader.percentage"
            [barbgcolor]="'#50D4AB'"
            [strokeWidth]="8"
            [showContent]="false"
          >
          </d-progress>
        </div>
        <span *ngIf="fileUploader.status === UploadStatus.failed" class="icon icon-running" (click)="upload($event, fileUploader)"> </span>
        <span *ngIf="fileUploader.status === UploadStatus.uploaded" class="icon icon-right"></span>
      </li>
    </ul>
    <span class="devui-input-group-addon">
      <svg class="svg-icon-dot" height="1em" width="1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m400.31892 176.970574c0-61.574381 50.113351-111.680569 111.679545-111.680569 61.576427 0 111.680569 50.106188 111.680569 111.680569 0 61.568241-50.104141 111.679545-111.680569 111.679545-61.566194 0-111.679545-50.111304-111.679545-111.679545zm0 335.028403c0-61.568241 50.113351-111.678522 111.679545-111.678522 61.576427 0 111.680569 50.110281 111.680569 111.678522 0 61.574381-50.105165 111.682615-111.680569 111.682615-61.566194 0-111.679545-50.108235-111.679545-111.682615zm0 335.037612c0-61.572334 50.113351-111.679545 111.679545-111.679545 61.575404 0 111.680569 50.107211 111.680569 111.679545 0 61.567217-50.105165 111.672382-111.680569 111.672382-61.566194 0-111.679545-50.105164-111.679545-111.672382zm0 0"
        />
      </svg>
    </span>
  </div>
  <d-button
    *ngIf="!autoUpload && !withoutBtn"
    [disabled]="disabled"
    (btnClick)="upload($event)"
    [style.margin-left.px]="10"
    bsStyle="common"
  >
    {{ uploadText || i18nText?.upload }}
  </d-button>
</div>
<ng-container *ngIf="showTip">
  <div class="devui-upload-tip">
    <span *ngIf="getStatus() === 'selected'" class="devui-loading">{{ uploadTips }}</span>
    <span *ngIf="getStatus() === 'uploading'" class="devui-loading">
      <span style="margin-right: 8px">{{ uploadTips }}</span>
      <a (click)="cancelUpload()">{{ i18nText?.cancelUpload }}</a>
    </span>
    <div *ngIf="getStatus() === 'uploaded'" class="devui-loaded">
      <i class="icon icon-right-o"></i>
      <span style="vertical-align: middle">{{ i18nText?.uploadSuccess }}</span>
    </div>
    <div *ngIf="getStatus() === 'failed'" class="devui-upload-failed">
      <i class="icon icon-info-o"></i>
      <span style="vertical-align: middle">
        <span style="margin-right: 8px">{{ uploadTips }}</span>
        <a (click)="upload($event)">{{ i18nText?.reUpload }}</a>
      </span>
    </div>
  </div>
</ng-container>
<d-multiple-upload-view
  #dMultipleUploadView
  [uploadedFiles]="uploadedFiles"
  [uploadedFilesRef]="uploadedFilesRef"
  [preloadFilesRef]="preloadFilesRef"
  [uploadOptions]="uploadOptions"
  [filePath]="filePath"
  [setCustomUploadOptions]="setCustomUploadOptions"
  (deleteUploadedFileEvent)="_onDeleteUploadedFile($event)"
>
</d-multiple-upload-view>
